<template>
    <div>
<!--        部门列表查询框-->
        <el-form v-model="queryParams">
            <span style="font-weight: 700 ; font-size: 15px ;margin-right: 10px;color: #606266">部门名称</span>
            <el-input
                    style="display: inline-block;width: 150px;margin-right: 20px;margin-bottom: 10px"
                    size="mini"
                    placeholder="请输入部门名称"
                    v-model="queryParams.deptName">
            </el-input>
            <span style="font-weight: 700 ; font-size: 15px ;margin-right: 10px;color: #606266">状态</span>
            <el-select v-model="queryParams.status"
                       style="display: inline-block;width: 150px;margin-right: 20px;margin-bottom: 10px"
                       size="mini"
                       placeholder="请选择部门状态">
                <el-option label="正常" value="0"></el-option>
                <el-option label="停用" value="1"></el-option>
            </el-select>
            <el-button type="primary" class="el-icon-search" size="mini" @click="seachDepts()">查询</el-button>
            <el-button type="info" class="el-icon-refresh" size="mini" @click="cleanSearch()" plain>清空</el-button>
        </el-form>

        <el-row style="display: inline-block; margin-right: 15px">
            <el-button type="primary" class="el-icon-plus" size="mini" @click="handleAdd" plain>新增</el-button>
        </el-row>
        <el-row style="display: inline-block; margin-right: 15px;">
            <el-button type="info" class="el-icon-sort" size="mini" @click="handleOpen()" plain>展开/折叠</el-button>
        </el-row>

<!--        新增部门表单-->
        <el-dialog :title="title" :visible.sync="dialogFormVisible" width="600px" append-to-body>
            <el-form :model="form" :rules="rules" ref="form" size="small" label-width="100px" class="demo-ruleForm">
                <el-form-item label="上级部门" prop="parentId">
                    <treeselect
                            v-model="form.parentId"
                            :options="depts"
                            :normalizer="normalizer"
                            :show-count="false"
                            placeholder="选择上级部门"
                    /></el-form-item>

                <el-form-item
                        label="部门名称" prop="deptName" style="display: inline-block">
                    <el-input v-model="form.deptName" placeholder="请输入部门名称" style="width: 180px"></el-input>
                </el-form-item>
                <el-form-item
                        label="显示排序" prop="orderNum" style="display: inline-block">
                    <el-input-number v-model="form.orderNum" controls-position="right" :min="1" style="width: 180px"></el-input-number>
                </el-form-item>

                <el-form-item
                        label="负责人" prop="leader" style="display: inline-block">
                    <el-input v-model="form.leader" placeholder="请输入负责人" style="width: 180px"></el-input>
                </el-form-item>

                <el-form-item
                        label="联系电话" prop="phone" style="display: inline-block">
                    <el-input v-model="form.phone" placeholder="请输入联系电话" style="width: 180px"></el-input>
                </el-form-item>

                <el-form-item
                        label="邮箱" prop="email" style="display: inline-block">
                    <el-input v-model="form.email" placeholder="请输入邮箱" style="width: 180px"></el-input>
                </el-form-item>

                <el-form-item
                        label="部门状态" prop="status" style="display: inline-block">
                    <el-radio v-model="form.status" label="0">正常</el-radio>
                    <el-radio v-model="form.status" label="1">停用</el-radio>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="saveDepts('form')">保存</el-button>
                    <el-button @click="reset()">重置</el-button>
                    <el-button @click="cancel()">关闭</el-button>
                </el-form-item>

            </el-form>

        </el-dialog>


<!--        部门列表-->
        <el-table
                :data="depts"
                highlight-current-row
                @current-change="handleCurrentChange"
                style="width: 100%;margin-bottom: 5px;font-size: 13px;margin-top: 10px"
                row-key="deptId"

                v-if="refreshTable"
                :default-expand-all="expands"
                :tree-props="{children: 'depts'}"
                :row-style="{height:'15px'}"
                :cell-style="{padding:'5px'}"
                :header-cell-style="{background:'#EBEEF5',color:'#606266'}">
            <el-table-column
                    prop="deptName"
                    label="部门名称"
                    width="300">
            </el-table-column>
            <el-table-column
                    prop="orderNum"
                    label="排序"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="状态"
                    width="100">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.status==0" type="success">正常</el-tag>
                    <el-tag v-if="scope.row.status==1" type="info">停用</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    label="创建时间"
                    width="300">
            </el-table-column>
            <el-table-column
                    label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="warning" plain
                            @click="handleUpdate(scope.row)">修改</el-button>
                    <el-button
                            size="mini"
                            type="primary"
                            @click="handleAdd(scope.row)">新增</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>


    </div>
</template>

<script>
    import Treeselect from "@riophae/vue-treeselect";
    import '@riophae/vue-treeselect/dist/vue-treeselect.css'


    export default {
        name: "Dept",
        components: {Treeselect},
        data(){
            return{
                title:"",       //表单标题
                depts: [],
                currentRow: null,   //高亮显示行数
                refreshTable: true,   //是否重新渲染表格
                expands: false,     //是否展开

                queryParams:{          //部门查询框表单数据
                    deptName:"",     //部门名称
                    status:""        //部门状态
                },

                dialogFormVisible: false,  //表单是否显示
                form:{
                    deptId: "",
                    parentId: 0,
                    deptName: "",
                    orderNum: undefined,
                    leader: "",
                    phone: "",
                    email: "",
                    status: "0"
                },      //表单数据

                rules: {    //表单校验项
                    deptName:[
                        { required: true, message: '请输入部门名称', trigger: 'blur' },
                        { max: 8, message: '部门名称不能超过 8 个字符', trigger: 'blur' }
                    ],
                    orderNum: [
                        { required: true, message: '请选择部门显示顺序', trigger: 'blur' }
                    ],
                    phone: [
                        { max: 11, message: ' 手机号码不能超过11位', trigger: 'blur' }
                    ]
                }
            }
        },

        methods:{

            //页面加载时显示部门列表数据
            showDepts(){
                this.axios.get("http://localhost:8080/depts/getDeptsByTerm")
                    .then(res => {
                        this.depts = res.data.data;
                    })
            },

            //按条件查询部门列表
            seachDepts(){
                this.axios.get("http://localhost:8080/depts/getDeptsByTerm",
                    {params:{
                        deptName : this.queryParams.deptName,
                        status: this.queryParams.status
                        }
                }).then(res => {
                    this.depts = res.data.data;
                })
            },

            //点击显示新增部门表单
            handleAdd(row){
                this.reset();
                this.form.parentId = row.deptId;
                this.dialogFormVisible = true;
                this.title = "添加部门";
                this.$refs.form.clearValidate();
            },

            //保存部门表单数据
            saveDepts(form){
                this.$refs[form].validate((valid) => {
                    if (valid) {
                        if (this.form.deptId == ""){
                            this.axios.post("http://localhost:8080/depts/addDepts",this.form)
                                .then(res => {
                                    if (res.data.data == "add"){
                                        this.$message.success("添加部门信息成功！");
                                        this.dialogFormVisible = false;
                                        this.reset();
                                        this.showDepts();
                                    }else {
                                        this.$message.error("添加部门信息失败!");

                                    }

                                })
                        }else{
                            this.axios.put("http://localhost:8080/depts/updateDepts",this.form)
                                .then(res => {
                                    if (res.data.data == "update"){
                                        this.$message.success("修改部门信息成功！");
                                        this.dialogFormVisible = false;
                                        this.reset();
                                        this.showDepts();
                                    }else {
                                        this.$message.error("修改部门信息失败!");
                                    }
                                })
                        }

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });



            },

            //点击修改后表单数据回显
            handleUpdate(row) {
                this.form = {
                    deptId: row.deptId,
                    parentId: row.parentId,
                    deptName: row.deptName,
                    orderNum: row.orderNum,
                    leader: row.leader,
                    phone: row.phone,
                    email: row.email,
                    status: row.status
                };
                this.dialogFormVisible = true;
                this.$refs.form.clearValidate();
            },

            //逻辑删除部门信息
            handleDelete(row){
                if(confirm("是否确定删除部门信息？")){
                    this.axios.delete("http://localhost:8080/depts/deleteDepts/"+row.deptId)
                        .then(res => {
                            if (res.data.data == "delete"){
                                this.$message.success("删除部门成功!");
                                this.showDepts()
                            }else {
                                this.$message.error("删除部门失败!");
                            }
                        })
                }
            },

            // 转换菜单数据结构
            normalizer(node) {
                if (node.depts && !node.depts.length) {
                    delete node.depts
                }
                if (node.deptName == null){
                    node.deptName="请选择上级部门"
                }
                return {
                    id: node.deptId,
                    label: node.deptName,
                    children: node.depts,
                }
            },


            //表格选中后色块变化
            setCurrent(row) {
                this.$refs.singleTable.setCurrentRow(row);
            },
            handleCurrentChange(val) {
                this.currentRow = val;
            },

            //清空查询框数据
            cleanSearch(){
                this.queryParams.status='',       //搜索框部门状态
                this.queryParams.deptName=''
            },


            //控制列表数据展开和关闭
            handleOpen() { //展开
                if (this.expands==false){
                    this.refreshTable = false;
                    this.expands = true;
                }else {
                    this.refreshTable = false;
                    this.expands = false;
                }
                this.$nextTick(() => {
                    this.refreshTable = true;
                });
            },

            //重置表单数据
            reset(){

                this.form = {
                    deptId: "",
                    parentId: 0,
                    deptName: "",
                    orderNum: undefined,
                    leader: "",
                    phone: "",
                    email: "",
                    status: "0"
                }
                // this.form.clearValidate();
            },
            // 表单取消按钮
            cancel() {
                this.dialogFormVisible = false;
                this.reset();
                this.showDepts()
            },

        },
        created() {
            this.showDepts();
        }
    }
</script>

<style scoped>
    /deep/.el-table th > .cell {
        text-align: center;

    }
    /deep/.el-table td > .cell {
        text-align: center;

    }


</style>